<template>
  <!--操作确认-->
  <div id="confirm-background" class="confirm-background" ref="confirmBackground">
    <div id="confirm" class="confirm" ref="confirm">
      <div class="confirm-head">
        <div class="confirm-title">
          <span v-text="title"></span>
        </div>
        <div id="confirm-cancel" class="confirm-cancel" @click="closeClick()">
          <div>×</div>
        </div>
      </div>
      <div class="confirm-content">
        <p v-html="content"></p>
      </div>
      <div class="confirm-foot">
        <div class="foot-btn">
          <template v-if="!onlySubmit">
            <div id="confirm-close" class="confirm-close" @click="cancelClick()" v-text="cancelText"></div>
          </template>
          <template v-if="!onlyClose">
            <div id="confirm-submit" class="confirm-submit" @click="submitClick()" v-text="confirmText"></div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeout: null,
      title: '确认操作', // 标题
      content: '请确认是否继续？',
      confirmText: '确认',
      cancelText: '取消',
      onlySubmit: false,
      onlyClose: false,

      onConfirm: () => { }, // 确认执行函数
      onCancel: () => { } // 取消执行函数
    }
  },
  mounted() {
    this.openConfirm()
  },
  methods: {
    submitClick() {
      this.onConfirm()
      this.closeConfirm()
    },
    cancelClick() {
      this.onCancel()
      this.closeConfirm()
    },
    closeClick() {
      this.closeConfirm()
    },

    openConfirm() {
      this.$refs.confirmBackground.style.display = "block"
      this.timeout = setTimeout(() => {
        this.$refs.confirmBackground.style.backdropFilter = "blur(1.5px) brightness(100%)"
        this.$refs.confirm.style.transform = "scaleY(1) scale(1)"
      }, 1)
    },
    closeConfirm() {
      this.$refs.confirmBackground.style.backdropFilter = "none"
      this.$refs.confirm.style.transform = "scaleY(0) scale(0.3)"
      this.timeout = setTimeout(() => {
        this.$refs.confirmBackground.style.display = "none"
      }, 200)
    },
  }
}
</script>

<style scoped>
.confirm {
  width: 350px;
  border-radius: 3px;
  position: fixed;
  top: 35%;
  left: 0;
  right: 0;
  margin: auto;
  letter-spacing: 1px;
  background-color: #222833;
  /*背景颜色*/
  transition: 0.2s;
  border: 1px #2d343f solid;
  transform: scaleY(0) scale(0.3);
}

.confirm-head {
  cursor: auto;
  width: 100%;
  height: 30px;
  background-color: #1e2430;
  border-bottom: 1px #272d38 solid;
}

.confirm-title {
  user-select: none;
  cursor: auto;
  float: left;
  max-width: 50%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 100%;
  text-indent: 0.8em;
  line-height: 30px;
  font-size: 16px;
  font-weight: bolder;
  color: rgba(255, 255, 255, 0.5);
}

.confirm-head .confirm-cancel {
  user-select: none;
  cursor: pointer;
  float: right;
  width: 30px;
  height: 100%;
  margin-right: 5px
}

.confirm-cancel div {
  height: 70%;
  width: 70%;
  margin: 13% 15%;
  border-radius: 3px;
  line-height: 120%;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  transition: 0.1s;
}

.confirm-cancel div:hover {
  background-color: #272d38;
  color: rgba(255, 255, 255, 0.7);
}

.confirm-cancel div:active {
  background-color: #2e3541;
}

.confirm-content {
  cursor: default;
  width: 100%;
}

.confirm-content p {
  width: 90%;
  color: rgba(255, 255, 255, 0.5);
  font-weight: lighter;
  font-size: 13px;
  letter-spacing: 1.5px;
  margin: 10px 15px;
}

.confirm-foot {
  width: 100%;
  height: 30px;
}

.foot-btn {
  float: right;
  min-width: 100px;
  margin: 0.7% 13px;
  margin-right: 10px;
}

.confirm-submit {
  user-select: none;
  cursor: pointer;
  float: right;
  min-width: 0px;
  height: 20px;
  line-height: 20px;
  padding-left: 3px;
  padding-right: 3px;
  margin-left: 5px;
  font-size: 12px;
  border-radius: 2px;
  text-align: center;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.3);
  background-color: #262d38;
  transform: 0.1s;
}

.confirm-close {
  user-select: none;
  cursor: pointer;
  float: right;
  min-width: 0px;
  height: 20px;
  line-height: 20px;
  padding-left: 3px;
  padding-right: 3px;
  margin-left: 5px;
  font-size: 12px;
  border-radius: 2px;
  text-align: center;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.3);
  background-color: #262d38;
  transform: 0.3s;
}

.confirm-close:hover,
.confirm-submit:hover {
  border: 1px solid #464c57;
  background-color: #2a323e;
  color: rgba(255, 255, 255, 0.5);
}

.confirm-close:active,
.confirm-submit:active {
  background-color: #2f353d;
}

.confirm-background {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}</style>
